<!DOCTYPE html>
<head>
	<title>test</title>
	
	<script type="text/javascript"  src="js/jquery-1.7.1.js"> </script>
	<script>
		$(function(){
			$(".text #header").show();
			$(".text #article").hide();
			$(".text #tail").hide();
			$(".text").mouseover(function() {
				$(".text #header").show();
				$(".text #article").show();
				$(".text #tail").show();
				});
			$(".text").mouseout(function() {
				$(".text #header").show();
			$(".text #article").hide();
			$(".text #tail").hide();
			});
		})
	</script>
	<style type="text/css">
		.text{border: 1px  solid #ccc;}
		.text #header{
			border: 1px solid #CC0000;
			width: 200px;
		}
		.text #article{
			border: 1px solid #CC0000;
			width: 200px;
		}
		.text #tail{
			border: 1px solid #CC0000;
			width: 200px;
		}
	</style>
</head>

<body>
	<div class="text">
		<div id="header">xxxx</div>
		<div id="article">dasfjsakhfsdkjhgkj</div>
		<div id="tail">bye</div>
		
	</div>
</body>